<!--暂无数据-->
<template>
  <div class="input-number-wrap">
    <div @click="sub" class="btn sub">-</div>
    <input ref="myInput" v-maxNumber="this.maxNumber" v-minNumber="minNumber" @input="change($event.target.value)" :value="number" type="text">
    <div @click="add" class="btn add">+</div>
  </div>
</template>

<script>
  export default {
    name: '',
    props: ['data', 'step', 'maxNumber','minNumber','defaultNumber'],
    data () {
      return {
        number: 0
      }
    },
    created () {
      this.number = this.defaultNumber || 0
    },
    watch: {
      number (newVal) {
        console.log(this.number)
        console.log(newVal)
        this.$emit('input', newVal)
        var e = document.createEvent('UIEvents')
        e.initUIEvent('keyup', true, true)
        this.$refs.myInput.value = newVal
        this.$refs.myInput.dispatchEvent(e)
        console.log('watch number')
      }
    },
    methods: {
      change (val) {
        // val = parseFloat(val).toFixed(1)
        console.log('change')
        console.log(val)
        this.number = val
        this.$emit('input', val)
      },
      add () {
        console.log('add')
        this.number = parseFloat(this.number) + (this.step || 1)
        console.log(this.number)
      },
      sub () {
        this.number = parseFloat(this.number) - (this.step || 1) >=(this.minNumber || 0) ? parseFloat(this.number) - (this.step || 1) : (this.minNumber || 0)
      }
    }
  }
</script>

<style scoped lang="scss">
  .input-number-wrap {
    display: flex;
    input {
      text-align: center;
      flex: 1;
    }
    .btn {
      width: 40px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      flex-shrink: 0;
      border: 1px solid #dddddd;
      border-radius: 5px;
    }
  }
</style>
